<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .grid-container {
      /* 网格布局 */
      display: inline-grid;
      grid-template: repeat(3, 100px) / repeat(3, 100px);
      margin: 100px;
    }
    .grid-item {
      padding: 10px;
      font-size: 30px;
      color: red;
    }
    .item1 {
      grid-column-start: 2;
      grid-column-end: 4;
      grid-row-start: 2;
      grid-row-end: 3;
      /* 背景色粉色 */
      background-color: pink;
    }
    .item2 {
      grid-column-start: 1;
      grid-column-end: 4;
      grid-row-start: 1;
      /* 背景色天蓝色 */
      background-color: skyblue;
    }
    .item3 {
      grid-row-start: 2;
      grid-row-end: 4;
      /* 背景色黄色 */
      background-color: khaki;
    }
  </style>
<body>
    <!-- 
        TIP
        我们可以通过指定 gird 项目四个边框分别定位在哪根网格线上，来确定 grid 项目的位置。

        属性	说明
        grid-column-start	项目左边框所在的垂直网格线
        grid-column-end	    项目右边框所在的垂直网格线
        grid-row-start	    项目上边框所在的水平网格线
        grid-row-end	    项目下边框所在的水平网格线

        当项目只指定了以上 4 个属性中的一个，则其它未指定的会采用默认位置,并且一个项目默认只占一个单元格。
        项目的默认位置，由 grid-auto-flow 属性决定
        如果值为 row，则会 “先行后列” 进行排列
        如果值为 column，则会 “先列后行” 进行排列
        row dense 表示 “先行后列”，并且尽可能紧密填满，尽量不出现空格。
        column dense 表示 "先列后行"，并且尽量填满空格
    -->

    <div class="grid-container">
        <div class="grid-item item1">1</div>
        <div class="grid-item item2">2</div>
        <div class="grid-item item3">3</div>
        <div class="grid-item">4</div>
        <div class="grid-item">5</div>
      </div>
</body>
</html>